<template>
  <div>
    <my-map v-bind:mapInfo="mapInfo"
            @postInitMap="postInitMap"
    />
  </div>
</template>

<script>
  import MyMap from '@/components/MyMap'
  import {CanvasUtil} from "../MyMap/CanvasUtil";

  export default {
    name: 'PageDemo',
    components: {
      MyMap: MyMap
    },
    data() {
      return {
        /*************************************
         * Step 1
         * 1）basicMapInfo，MyMap初始化后，获取基础数据，canvas 长，宽，字体
         * 2）mapInfo，地图信息（Model）
         *************************************/
        basicMapInfo: {},
        mapInfo: null,
      }
    },
    methods: {
      /*************************************
       * Step 2 获取绘制地图的基础信息
       *************************************/
      postInitMap(basicMapInfo) {
        this.basicMapInfo = basicMapInfo
      }
    },
    mounted() {
      /*************************************
       * Step 3 转换地图数据
       *************************************/
        // let shpJson = shpJsonPage0ZongLan
        // let mapInfo = this.myMapShpJsonAdapter.getMapInfo(this.basicMapInfo, shpJson)
        // mapInfo.nodes.forEach(node => {
        //   let mxdId = this.myMapShpJsonAdapter.getMxdIDByNodeData(node.data)
        //   // console.log("------------->" + mxdId);
        // })

      let fps = this.basicMapInfo.fps
      let length = 20
      let x = 90
      let y = 80
      let mapInfo = {
        ...this.basicMapInfo,
        flashLines: [
          CanvasUtil.flashLineCreate(50, 50, x, y, length, fps),
          // CanvasUtil.flashLineCreate(400, 0, x, y, length, fps),
          // CanvasUtil.flashLineCreate(0, 400, x, y, length, fps),
          // CanvasUtil.flashLineCreate(400, 400, x, y, length, fps)
        ],
        nodes: [
          {
            x: 200,
            y: 200,
            iconName: "aa",
            iconWidth: 40,
            iconHeight: 40,
            drawNodeExt: (context, node) => {

              let value = Math.round(value / 10) * 10
              console.log('---------------> value:' + value);


              let radius = 8
              let baseLength = radius * Math.sin(0.25 * Math.PI)
              let iconWidth = node.iconWidth
              let iconHeight = node.iconHeight
              let x = node.x - iconWidth
              let y = node.y
              let color = 'green'

              if (value === 0) {
                context.save()
                context.translate(x, y)
                context.beginPath()
                CanvasUtil.strokeArc(context, 0, 0, radius, -1 / 4, 1 + 1 / 4, color)
                CanvasUtil.drawLine(context, -baseLength, -baseLength, -baseLength, -baseLength * 5, 1, color)
                CanvasUtil.strokeArc(context, 0, -baseLength * 5, baseLength, 1, 2, color)
                CanvasUtil.drawLine(context, baseLength, -baseLength, baseLength, -baseLength * 5, 1, color)
                context.closePath()
                context.restore()
                CanvasUtil.drawText(context, "" + value + "%", x, y + radius * 2, 10, color, "center")
              }

              if (value === 10) {
                context.save()
                context.translate(x, y)
                context.beginPath()
                CanvasUtil.strokeArc(context, 0, 0, radius, -1 / 4, 1 / 4, color)
                CanvasUtil.fillArc(context, 0, 0, radius, 1 / 4, 3 / 4, color)
                CanvasUtil.strokeArc(context, 0, 0, radius, 3 / 4, 1 + 1 / 4, color)
                CanvasUtil.drawLine(context, -baseLength, -baseLength, -baseLength, -baseLength * 5, 1, color)
                CanvasUtil.strokeArc(context, 0, -baseLength * 5, baseLength, 1, 2, color)
                CanvasUtil.drawLine(context, baseLength, -baseLength, baseLength, -baseLength * 5, 1, color)
                context.closePath()
                context.restore()
                CanvasUtil.drawText(context, "" + value + "%", x, y + radius * 2, 10, color, "center")
              }

              if (value === 20) {
                context.save()
                context.translate(x, y)
                context.beginPath()
                CanvasUtil.strokeArc(context, 0, 0, radius, -1 / 4, 1 / 4 - 1 / 6, color)
                CanvasUtil.fillArc(context, 0, 0, radius, 1 / 4 - 1 / 6, 3 / 4 + 1 / 6, color)
                CanvasUtil.strokeArc(context, 0, 0, radius, 3 / 4, 1 + 1 / 4, color)
                CanvasUtil.drawLine(context, -baseLength, -baseLength, -baseLength, -baseLength * 5, 1, color)
                CanvasUtil.strokeArc(context, 0, -baseLength * 5, baseLength, 1, 2, color)
                CanvasUtil.drawLine(context, baseLength, -baseLength, baseLength, -baseLength * 5, 1, color)
                context.closePath()
                context.restore()
                CanvasUtil.drawText(context, "" + value + "%", x, y + radius * 2, 10, color, "center")
              }
              if (value === 30) {
                context.save()
                context.translate(x, y)
                context.beginPath()
                CanvasUtil.strokeArc(context, 0, 0, radius, -1 / 4, 0, color)
                CanvasUtil.fillArc(context, 0, 0, radius, 0, 1, color)
                CanvasUtil.strokeArc(context, 0, 0, radius, 1, 1 + 1 / 4, color)
                CanvasUtil.drawLine(context, -baseLength, -baseLength, -baseLength, -baseLength * 5, 1, color)
                CanvasUtil.strokeArc(context, 0, -baseLength * 5, baseLength, 1, 2, color)
                CanvasUtil.drawLine(context, baseLength, -baseLength, baseLength, -baseLength * 5, 1, color)
                context.closePath()
                context.restore()
                CanvasUtil.drawText(context, "" + value + "%", x, y + radius * 2, 10, color, "center")
              }
              if (value === 40) {
                context.save()
                context.translate(x, y)
                context.beginPath()
                CanvasUtil.strokeArc(context, 0, 0, radius, -1 / 4, -1 / 6, color)
                CanvasUtil.fillArc(context, 0, 0, radius, -1 / 6, 1 + 1 / 6, color)
                CanvasUtil.strokeArc(context, 0, 0, radius, 1 + 1 / 6, 1 + 1 / 4, color)
                CanvasUtil.drawLine(context, -baseLength, -baseLength, -baseLength, -baseLength * 5, 1, color)
                CanvasUtil.strokeArc(context, 0, -baseLength * 5, baseLength, 1, 2, color)
                CanvasUtil.drawLine(context, baseLength, -baseLength, baseLength, -baseLength * 5, 1, color)
                context.closePath()
                context.restore()
                CanvasUtil.drawText(context, "" + value + "%", x, y + radius * 2, 10, color, "center")
              }
              if (value === 50) {
                context.save()
                context.translate(x, y)
                context.beginPath()
                // CanvasUtil.strokeArc(context, 0, 0, radius, -1 / 4, 1 / 4, color)
                CanvasUtil.fillArc(context, 0, 0, radius, -1 / 4, 1 + 1 / 4, color)
                // CanvasUtil.strokeArc(context, 0, 0, radius, 3 / 4, 1 + 1 / 4, color)
                CanvasUtil.drawLine(context, -baseLength, -baseLength, -baseLength, -baseLength * 5, 1, color)
                CanvasUtil.strokeArc(context, 0, -baseLength * 5, baseLength, 1, 2, color)
                CanvasUtil.drawLine(context, baseLength, -baseLength, baseLength, -baseLength * 5, 1, color)
                context.closePath()
                context.restore()
                CanvasUtil.drawText(context, "" + value + "%", x, y + radius * 2, 10, color, "center")
              }
              if (value === 50) {
                context.save()
                context.translate(x, y)
                context.beginPath()
                CanvasUtil.fillArc(context, 0, 0, radius, -1 / 4, 1 + 1 / 4, color)
                CanvasUtil.drawLine(context, -baseLength, -baseLength, -baseLength, -baseLength * 5, 1, color)
                CanvasUtil.strokeArc(context, 0, -baseLength * 5, baseLength, 1, 2, color)
                CanvasUtil.drawLine(context, baseLength, -baseLength, baseLength, -baseLength * 5, 1, color)
                context.closePath()
                context.restore()
                CanvasUtil.drawText(context, "" + value + "%", x, y + radius * 2, 10, color, "center")
              }
              if (value === 60) {
                color = '#FFD700'
                context.save()
                context.translate(x, y)
                context.beginPath()
                CanvasUtil.fillArc(context, 0, 0, radius, -1 / 4, 1 + 1 / 4, color)
                CanvasUtil.drawLine(context, -baseLength, -baseLength, -baseLength, -baseLength * 5, 1, color)
                CanvasUtil.strokeArc(context, 0, -baseLength * 5, baseLength, 1, 2, color)
                CanvasUtil.fillRect(context, -baseLength, -baseLength * 2, baseLength * 2, baseLength * 1, color)
                CanvasUtil.drawLine(context, baseLength, -baseLength, baseLength, -baseLength * 5, 1, color)
                context.closePath()
                context.restore()
                CanvasUtil.drawText(context, "" + value + "%", x, y + radius * 2, 10, color, "center")
              }
              if (value === 70) {
                color = '#FFD700'
                context.save()
                context.translate(x, y)
                context.beginPath()
                CanvasUtil.fillArc(context, 0, 0, radius, -1 / 4, 1 + 1 / 4, color)
                CanvasUtil.drawLine(context, -baseLength, -baseLength, -baseLength, -baseLength * 5, 1, color)
                CanvasUtil.strokeArc(context, 0, -baseLength * 5, baseLength, 1, 2, color)
                CanvasUtil.fillRect(context, -baseLength, -baseLength * 3, baseLength * 2, baseLength * 2, color)
                CanvasUtil.drawLine(context, baseLength, -baseLength, baseLength, -baseLength * 5, 1, color)
                context.closePath()
                context.restore()
                CanvasUtil.drawText(context, "" + value + "%", x, y + radius * 2, 10, color, "center")
              }
              if (value === 80) {
                color = 'red'
                context.save()
                context.translate(x, y)
                context.beginPath()
                CanvasUtil.fillArc(context, 0, 0, radius, -1 / 4, 1 + 1 / 4, color)
                CanvasUtil.drawLine(context, -baseLength, -baseLength, -baseLength, -baseLength * 5, 1, color)
                CanvasUtil.strokeArc(context, 0, -baseLength * 5, baseLength, 1, 2, color)
                CanvasUtil.fillRect(context, -baseLength, -baseLength * 4, baseLength * 2, baseLength * 3, color)
                CanvasUtil.drawLine(context, baseLength, -baseLength, baseLength, -baseLength * 5, 1, color)
                CanvasUtil.drawText(context, "" + value + "%", 0, radius * 2, 10, color)
                context.closePath()
                context.restore()
                CanvasUtil.drawText(context, "" + value + "%", x, y + radius * 2, 10, color, "center")
              }
              if (value === 90) {
                color = 'red'
                context.save()
                context.translate(x, y)
                context.beginPath()
                CanvasUtil.fillArc(context, 0, 0, radius, -1 / 4, 1 + 1 / 4, color)
                CanvasUtil.drawLine(context, -baseLength, -baseLength, -baseLength, -baseLength * 5, 1, color)
                CanvasUtil.strokeArc(context, 0, -baseLength * 5, baseLength, 1, 2, color)
                CanvasUtil.fillRect(context, -baseLength, -baseLength * 5, baseLength * 2, baseLength * 4, color)
                CanvasUtil.drawLine(context, baseLength, -baseLength, baseLength, -baseLength * 5, 1, color)
                CanvasUtil.drawText(context, "" + value + "%", 0, radius * 2, 10, color)
                context.closePath()
                context.restore()
                CanvasUtil.drawText(context, "" + value + "%", x, y + radius * 2, 10, color, "center")
              }
              if (value === 100) {
                color = 'red'
                context.save()
                context.translate(x, y)
                context.beginPath()
                CanvasUtil.fillArc(context, 0, 0, radius, -1 / 4, 1 + 1 / 4, color)
                CanvasUtil.drawLine(context, -baseLength, -baseLength, -baseLength, -baseLength * 5, 1, color)
                CanvasUtil.fillArc(context, 0, -baseLength * 5, baseLength, 1, 2, color)
                CanvasUtil.fillRect(context, -baseLength, -baseLength * 5, baseLength * 2, baseLength * 4, color)
                CanvasUtil.drawLine(context, baseLength, -baseLength, baseLength, -baseLength * 5, 1, color)
                CanvasUtil.drawText(context, "" + value + "%", 0, radius * 2, 10, color)
                context.closePath()
                context.restore()
                CanvasUtil.drawText(context, "" + value + "%", x, y + radius * 2, 10, color, "center")
              }


            }
          }
        ]
      }

      /*************************************
       * Step 4 更新地图数据
       *************************************/
      this.mapInfo = mapInfo
    }
  }
</script>

<style scoped>
</style>
